<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<style type="text/css">
	*{
		box-sizing: border-box;
	}
	.header{
		width:1200px;
		height: 100px;
		margin: 0 auto;
		position: relative;
	}
	
	.logo{
		margin-top: 20px;
    	background: url('images/logo.png') no-repeat;
    	width: 318px;
    	height: 70px;
    	display: inline-block;

	}
	#nav{
		position: absolute;
		left: 390px;
		top: 45px;

		
	}
	#nav li{float: left;}
	#nav li a{
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left:65px; 
	}
	#nav li a:hover{
		color: #2288f6;
	}
	.img1 img{
		width: 100%;
		height: 560px;
	}
	section{
		width: 1008px;
		margin: 0 auto;
	}
	.line1, .line2{height: 1px; width: 423px; border:1px solid #ccc; display: block; margin-top: 77px;}
	.content1 h3{
		width: 125px;
		height: 45px;
		background: url('images/sprite-tit.png') -18px -82px no-repeat;
		margin: 64px 17px 50px;
	}
	.ol li{   
		width: 256px;
    	vertical-align: top;
    	text-align: center;
    	margin: 0 39px;
    	display: inline-block;
    }
    .icon{
    	margin: 0 auto;
    	width: 130px;
    	height: 130px;
    	background:url(images/yingxiao_ico.png) no-repeat;

    }
    .icon1{
    	background:url(images/yingxiao_ico.png) 0 -130px no-repeat;
    }
    .icon2{
    	background:url(images/yingxiao_ico.png) 0 -260px no-repeat;
    }
    .ol li h3{
    	margin-top: 20px;
    	font-size: 24px;
    	font-weight: bold;
    }
    .ol li em{
    	margin-top: 10px;
    	color: #999;
    	display: block;
    }
    .content2{
    	margin-top: 64px;
    }
    .content2 h3{
    	width: 125px;
    	height: 43px;
    	background: url('images/sprite-tit.png')-22px -443px no-repeat
    }
    .content3 h3{
    	height: 46px;
    	background: url('images/sprite-tit.png')-22px -217px no-repeat
    } 
    .list{
    	width: 1160px;
    	margin:0px auto;
    	overflow: hidden;
    }
    .list li{
    	width: 230px;
    	height:83px;
    	border-right:1px dashed #999;
    	border-bottom:1px dashed #999; 
    	float: left;
    	background: url('images/tao.png')no-repeat center;

    }
    .list_end li{
    	border-bottom: none;
    }
    .button{
    	width: 200px;
    	height: 56px;
    	border: 5px solid #fe982d;
    	border-radius:5px; 
    	margin: 0 auto;
    	margin-top: 100px;
    	text-align: center;
	   	color: #fe982d;
	   	font-size: 18px;
	   	line-height: 56px;

    }
   .button:hover{
   	background: #fe982d;
   	color: #fff;
   }
   .footer{
   	width: 100%;
   	height: 170px;
   	background: #212425;
    margin-top:200px; 
   	text-align: center;
   	position: relative;
   }
   .footer ul{
	position: absolute;
	left: 50%;
	margin-left:-50% ; 
   }
  .footer li{
	float: left;
	color: #fff;
	text-align: center;
	margin: 0 auto;
   }
	</style>
</head>
<body>
	<div id="l">
	<header class="header">
		<p class="logo"></p>
		<nav id="nav">
			<ul>
				<li><a href="#">关于人人店</a></li>
				<li><a href="#">商城系统</a></li>
				<li><a href="#">开放平台</a></li>
				<li><a href="#">人人分销</a></li>
				<li><a href="#" style="">用户管理</a></li>
			</ul>
		</nav>
	</header>
	<banner class="img1">
			<img src="images/banner-0.png"/>
	</banner>
	<section>
		<div class="content1 clearfix">
			<span class="line1 fl"></span>
			<h3 class="fl"></h3>	
			<span class="line2 fr"></span>
		</div>
		<ol class="ol clearfix">
			<li class="fl">
				<div class="icon"></div>
				<h3>简单快速</h3>
				<em>0门槛加入，无需学习效果立竿见影</em>
			</li>
			<li class="fl">
				<div class="icon icon1"></div>
				<h3>简单快速</h3>
				<em>0门槛加入，无需学习效果立竿见影</em>
			</li>
			<li class="fl">
				<div class="icon icon2"></div>
				<h3>简单快速</h3>
				<em>0门槛加入，无需学习效果立竿见影</em>
			</li>
		</ol>
		<div class="content1 content2 clearfix">
			<span class="line1 fl"></span>
			<h3 class="fl"></h3>	
			<span class="line2 fr"></span>
		</div>
		<div>
			<img src="images/yinxiao_flow.png">
		</div>
		<div class="content1 content2 content3 clearfix">
			<span class="line1 fl"></span>
			<h3 class="fl"></h3>	
			<span class="line2 fr"></span>
		</div>
		
	</section>
		<ul class="list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li style="border-right: none; "></li>
		</ul>
		<ul class="list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li style="border-right: none; "></li>
		</ul>
		<ul class="list list_end">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li style="border-right: none; "></li>
		</ul>
		<div class="button">
			<p>免体验费</p>
		</div>
		<footer class="footer">
			<ul class="clearfix">
				<li>shopcmd</li>
				<li>首页</li>
				<li>官网云商城</li>
				<li>智慧门店</li>
				<li>营销平台</li>
				<li>媒体联盟</li>
				<li>关于我们</li>
			</ul>
			<p class="fl">4008-188-360</p>
			<p></p>
			<p></p>
		</footer>
		
	</div>
</body>
</html>